<script setup lang="ts">
import { ElTabs, ElTabPane, ElForm, ElFormItem } from "element-plus";
import { reactive, ref, toRefs, watch } from "vue";
import { QuickForm, IFormItem } from "@ainiteam/quick-vue3-ui";
import Form from "../../components/Form/index.vue";
import CodeMirror from "../../components/CodeMirror/index.vue";

const props = defineProps({
  activeName: {
    type: String,
    default: "form",
  },
  componentMdoel: {
    type: Object,
    default: () => {},
  },
});
const emits = defineEmits(["change"]);
const { activeName, componentMdoel } = toRefs(props);

const active = ref("form");

const code = ref("");
const submitEventDialogVisible = ref(false);

// 索引/名称/占位符/默认值/格式化/禁用/只读/
const attributes = ref<Array<IFormItem>>([
  {
    label: "标签名",
    labelWidth: "80px",
    vModel: "label",
    placeholder: "请输入名称",
  },
  {
    label: "类型",
    labelWidth: "80px",
    vModel: "type",
    placeholder: "请输入类型",
  },
  // {
  //     label:'tab索引',
  //     type:'number',
  //     vModel: "tabIndex",
  //     placeholder: "请输入tab索引",
  // }
  {
    label: "占位符",
    labelWidth: "80px",
    vModel: "placeholder",
    placeholder: "请输入占位符",
  },
  {
    label: "绑定值",
    labelWidth: "80px",
    vModel: "vModel",
    readonly: true,
  },
  {
    label: "值",
    labelWidth: "80px",
    vModel: "value",
    placeholder: "请输入默认值",
  },
  {
    label: "标签宽度",
    labelWidth: "80px",
    vModel: "labelWidth",
    placeholder: "请输入标签宽度",
  },
  {
    label: "验证字段",
    labelWidth: "80px",
    vModel: "prop",
    placeholder: "请输入字段",
  },
  {
    label: "格式化",
    labelWidth: "80px",
    type: "textarea",
    vModel: "format",
    placeholder: "请输入格式化",
  },
  {
    label: "只读",
    labelWidth: "80px",
    type: "switch",
    vModel: "readonly",
  },
  {
    label: "禁用",
    labelWidth: "80px",
    type: "switch",
    vModel: "disable",
  },
]);
const checkboxAttributes = ref<Array<IFormItem>>([
  ...attributes.value,
  {
    label: "选项",
    type: "textarea",
    labelWidth: "80px",
    vModel: "options",
    readonly: true,
  },
]);

const componentModel2 = reactive({});
const componentFormItems = ref<Array<IFormItem>>([]);

const formModel = reactive({
  type: "form",
  size: "default",
  labelPosition: "left",
  labelAlgn: "left",
  formInline: true,
  hiddenAction: false,
  onSubmit: "",
});
const formItems = ref<Array<IFormItem>>([
  {
    label: "表单类型",
    labelWidth: "80px",
    vModel: "type",
    type: "select",
    options: [
      {
        label: "默认表单",
        value: "form",
      },
      {
        label: "搜索表单",
        value: "search",
      },
      {
        label: "添加表单",
        value: "add",
      },
      {
        label: "编辑表单",
        value: "edit",
      },
      {
        label: "详情表单",
        value: "detail",
      },
    ],
  },
  {
    label: "组件大小",
    labelWidth: "80px",
    vModel: "size",
    type: "radio",
    value: "default",
    options: [
      {
        label: "默认",
        value: "default",
      },
      {
        label: "大",
        value: "large",
      },
      {
        label: "小",
        value: "small",
      },
    ],
  },
  {
    label: "标签位置",
    labelWidth: "80px",
    vModel: "labelPosition",
    type: "radio",
    options: [
      {
        label: "左边",
        value: "left",
      },
      {
        label: "顶部",
        value: "top",
      },
    ],
  },
  {
    label: "标签对齐",
    labelWidth: "80px",
    vModel: "labelAlgn",
    type: "radio",
    options: [
      {
        label: "左对齐",
        value: "left",
      },
      {
        label: "居中对齐",
        value: "center",
      },
      {
        label: "右对齐",
        value: "right",
      },
    ],
  },
  {
    label: "行内表单",
    labelWidth: "80px",
    vModel: "formInline",
    type: "switch",
  },
  {
    label: "隐藏操作",
    labelWidth: "80px",
    vModel: "hiddenAction",
    type: "switch",
  },
  {
    label: "提交事件",
    labelWidth: "80px",
    vModel: "onSubmit",
    type: "button",
    btnText: "事件编辑器",
    click: (val) => {
      eventType.value = "onSubmit";
      // code.value = `function onSubmit(){
      //   //代码编辑区域
      // }`;
      submitEventDialogVisible.value = true;
    },
  },
]);
const eventType = ref("");
const handleChange = (model) => {
  for (const key in model) {
    if (Object.prototype.hasOwnProperty.call(model, key)) {
      const element = model[key];
      formModel[key] = element;
    }
  }
  emits("change", {
    setting: formModel,
    componentModel: componentModel2,
  });
};
const handleComponentChange = (model) => {
  debugger;
  for (const key in model) {
    if (Object.prototype.hasOwnProperty.call(model, key)) {
      const element = model[key];
      componentModel2[key] = element;
    }
  }
  emits("change", {
    setting: formModel,
    componentModel: componentModel2,
  });
};
const handleOk = () => {
  formModel[eventType.value] =code.value
 
  submitEventDialogVisible.value = false;
};
watch(
  () => componentMdoel.value,
  (val) => {
    if (val.type === "radio") {
    } else if (val.type === "checkbox") {
      componentFormItems.value = checkboxAttributes.value;
    } else {
      componentFormItems.value = attributes.value;
    }

    for (const key in val) {
      if (Object.prototype.hasOwnProperty.call(val, key)) {
        const element = val[key];
        componentModel2[key] = element;
      }
    }

    // componentFormItems.value.forEach((element) => {
    //   if (element.vModel === "options") {
    //     element.value = JSON.stringify(val[element.vModel], null, 2);
    //   } else {
    //     element.value = val[element.vModel];
    //   }
    // });
  },
  {
    // immediate: true,
    deep: true,
  }
);
watch(
  () => activeName.value,
  (val) => {
    active.value = val;
  }
);
</script>
<template>
  <div class="setting-panel">
    <el-tabs v-model="active">
      <el-tab-pane label="表单属性" name="form">
        <div class="form-attribute">
          <Form
            label-position="top"
            :model="formModel"
            :items="formItems"
            :hidden-action="true"
            @on-change="handleChange"
          >
          </Form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="组件属性" name="component">
        <div class="component-attribute">
          <Form
            label-position="top"
            :model="componentModel2"
            :items="componentFormItems"
            :hidden-action="true"
            @on-change="handleComponentChange"
          >
          </Form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      v-model="submitEventDialogVisible"
      title="提交事件代码"
      width="60%"
    >
      <code-mirror v-model="code"></code-mirror>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="submitEventDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleOk"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="css">
.setting-panel {
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-left: none;
  height: 577px;
}
.form-attribute,
.component-attribute {
  height: 500px;
  overflow-y: auto;
}
</style>
